<template>
	<view class="container">
		<view class="left-bottom-sign"></view>
		<view class="back-btn yticon icon-zuojiantou-up" @click="navBack"></view>
		<view class="right-top-sign"></view>
		
		<view class="wrapper">
			<view class="left-top-sign">LOGIN</view>
			<view class="welcome">{{i18n.welcome}}</view>
			<view class="input-content">
				<text class="tit">{{i18n.phone_title}}</text>
				<view class="uni-list">
					<view class="uni-list-cell">
						<view class="uni-list-cell-left">
							<picker @change="cntPickerChange" :value="index" :range="country_array" range-key="cnt">
								<view class="uni-input input-left">{{country_array[index].cnt}}</view>
							</picker>
						</view>
						<view class="uni-list-cell-db">
							<view class="input-item">
								<input type="number" :value="mobile" :placeholder="i18n.phone_holder" maxlength="11" data-key="mobile" @input="inputChange" />
							</view>
						</view>
					</view>
				</view>
				
				<text class="tit">{{i18n.captcha_title}}</text>
				<view class="uni-list">
					<view class="uni-list-cell">
						<view class="uni-list-cell-left">
							<input
								type="number"
								class="input-v"
								:value="captcha"
								:placeholder="i18n.captcha_holder"
								maxlength="20"
								data-key="captcha" 
								@input="inputChange"
								@confirm="toLogin"
							/>
						</view>
						<view class="uni-list-cell-db">
							<button class="btn-act" @tap="getCaptcha" :disabled="retrying" type="primary" plain="true">{{btn_captcha_text}}</button>
							
						</view>
					</view>
				</view>
			</view>
			<button class="confirm-btn" @tap="toLogin" :disabled="logining">{{i18n.login_title}}</button>
			<!-- <view class="forget-section">忘记密码?</view> -->
		</view>
		
		<view class="register-section">
			<!-- 还没有账号? -->
			<!-- <text @click="toRegist">马上注册</text> -->
			<!-- <text @click="toGetInfo">测试获取数据</text> -->
		</view>
	</view>
</template>

<script>
import {mapState, mapMutations} from 'vuex';
import request from '../../common/request.js';
import request_async from '../../common/request_async.js';
import { getToken, setToken, removeToken } from '@/common/auth';
import config from '@/common/config.js'


export default {
	data() {
		return {
			mobile: '',
			captcha: '',
			logining: false,
			retrying: false,
			btn_captcha_text: '',
			index: 0,
			country: '+86',
			country_array: [{val: 0, cnt: '+86'},{val: 1, cnt: '+61'}],
		};
	},
	onLoad(option) {
		if(option.relogin){
			this.logout();
		}
		//获取验证码
		this.btn_captcha_text = this.i18n.captcha_btn;
		if(this.hasLogin && !option.relogin){
			uni.switchTab({
				url: `/pages/user/user`
			})
		}
		
	},
	onShow() {
		
	},
	computed: {
		i18n () {  
		  return this.$lang.login_phone
		},
		...mapState(['hasLogin','userInfo']),
	},
	methods: {
		...mapMutations(['login', 'logout']),
		inputChange(e) {
			const key = e.currentTarget.dataset.key;
			this[key] = e.detail.value;
			// if(this.mobile != '' && this.captcha != ''){
			// 	this.logining = false;
			// }
		},
		cntPickerChange: function(e) {
			this.index = e.detail.value;
			this.country = this.country_array[this.index].cnt;
		},
		navBack() {
			uni.navigateBack();
		},
		toRegist() {
			this.$api.msg('去注册');
			uni.navigateTo({
				url: `/pages/public/register`
			})
		},
		async getCaptcha(){
			const { mobile, captcha } = this;
			if(mobile == ''){
				this.$api.msg(this.i18n.msg_input_mobile);
				return false;
			}
			let lang = uni.getStorageSync('lang') ? uni.getStorageSync('lang') : 'zh-CN';
			var res = await request_async({
				name: 'code.pcaptcha',
				method: 'POST',
				data: {phone: mobile, lang: lang, country: this.country}
			})
			console.log({phone: mobile, lang: lang, country: this.country});
			console.log(res);
			if(res.code != 0){
				// this.$api.msg(this.i18n.phone_input_error);
				this.$api.msg(res.msg);
				return false;
			}
			// if(res.data.code != 'OK'){
			// 	this.$api.msg(res.data.msg);
			// }
			this.captcha_retry_sec = 60;
			this.retrying = true;
			this.btn_captcha_text = '('+this.captcha_retry_sec+')'+this.i18n.captcha_btn_retry;
			var interval = setInterval(() => {
				this.captcha_retry_sec -=1;
				if(this.captcha_retry_sec == 0){
					this.btn_captcha_text = this.i18n.captcha_btn;
					this.retrying = false;
					clearInterval(interval);
					return false;
				}
				this.btn_captcha_text = '('+this.captcha_retry_sec+')'+this.i18n.captcha_btn_retry;
			}, 1000);
		},
		async toLogin() {
			this.logining = true;
			
			const { mobile, captcha } = this;
			var res = await request_async({
				name: 'user.login',
				method: 'POST',
				data: {phone: mobile, country: this.country, code: captcha},
			})
			if (res.code === 0) {
				console.log(res);
				if(res.data.token){
					setToken(res.data);
				}
				// var info = await request_async({
				// 	name: 'user.info',
				// 	method: 'GET',
				// });
				// this.login(info.data);
				this.$store.dispatch("upuser",{token : res.data.token});
				uni.switchTab({
					url: config.isCourse ? `/pages/course/index` : `/pages/user/user`
				})
			} else {
				this.$api.msg(res.msg);
				this.logining = false;
			}
		},
		async toGetInfo(){
			// var res = await request_async({
			// 	name: 'user.info',
			// 	method: 'GET',
			// });
			// console.log(res);
			this.$store.dispatch("upuser", []);
		}
	}
};
</script>

<style lang="scss">
page {
	background: #fff;
}
.getcaptcha {
	width: 100%
}
.container {
	padding-top: 80px;
	position: relative;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	background: #fff;
}
.wrapper {
	position: relative;
	z-index: 90;
	background: #fff;
	padding-bottom: 40upx;
}
.back-btn {
	position: absolute;
	left: 40upx;
	z-index: 9999;
	padding-top: var(--status-bar-height);
	top: 40upx;
	font-size: 40upx;
	color: $font-color-dark;
}
.left-top-sign {
	font-size: 120upx;
	color: $page-color-base;
	position: relative;
	left: -16upx;
}
.right-top-sign {
	position: absolute;
	top: 80upx;
	right: -30upx;
	z-index: 95;
	&:before,
	&:after {
		display: block;
		content: '';
		width: 400upx;
		height: 80upx;
		background: #b4f3e2;
	}
	&:before {
		transform: rotate(50deg);
		border-radius: 0 50px 0 0;
	}
	&:after {
		position: absolute;
		right: -198upx;
		top: 0;
		transform: rotate(-50deg);
		border-radius: 50px 0 0 0;
		/* background: pink; */
	}
}
.left-bottom-sign {
	position: absolute;
	left: -270upx;
	bottom: -320upx;
	border: 100upx solid #d0d1fd;
	border-radius: 100%;
	padding: 180upx;
}
.welcome {
	position: relative;
	left: 50upx;
	top: -90upx;
	font-size: 46upx;
	color: #555;
	text-shadow: 1px 0px 1px rgba(0, 0, 0, 0.3);
}
.input-content {
	padding: 0 60upx;
	.input-left{
		height: 40px;
	}
}
.tit {
	height: 50upx;
	line-height: 56upx;
	font-size: $font-sm + 2upx;
	color: $font-color-base;
}
.group-item {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: center;
	padding: 0 30upx;
	background: $page-color-light;
	// height: 120upx;
	border-radius: 4px;
	&:last-child {
		margin-bottom: 0;
	}
	.input-v {
		height: 40px;
		font-size: $font-base + 2upx;
		color: $font-color-dark;
	}
	.btn-act {
		margin-top: 10px;
		color: #85919e;
		border: 1px solid #ffffff;
		font-size: $font-base - 8upx;
		padding-left: 8upx;
		padding-right: 8upx;
	}
}
.input-item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding: 0 30upx;
	background: $page-color-light;
	height: 40px;
	border-radius: 4px;
	&:last-child {
		margin-bottom: 0;
	}
	input {
		font-size: $font-base + 2upx;
		color: $font-color-dark;
		width: 100%;
	}
}

.confirm-btn {
	width: 630upx;
	height: 76upx;
	line-height: 76upx;
	border-radius: 50px;
	margin-top: 70upx;
	background: $uni-color-primary;
	color: #fff;
	font-size: $font-lg;
	&:after {
		border-radius: 100px;
	}
}
.forget-section {
	font-size: $font-sm + 2upx;
	color: $font-color-spec;
	text-align: center;
	margin-top: 40upx;
}
.register-section {
	position: absolute;
	left: 0;
	bottom: 50upx;
	width: 100%;
	font-size: $font-sm + 2upx;
	color: $font-color-base;
	text-align: center;
	text {
		color: $font-color-spec;
		margin-left: 10upx;
	}
}
</style>